{% extends 'base.html' %}

{% block header_js %}
    <title>attack-rule_target</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="/static/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="/static/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
{% endblock %}

{% block navname %}information{% endblock %}
{% block navSon %}information{% endblock %}

{% block content %}
     <div class="content-wrapper" style="margin-left: 0px;">
        <section class="content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">
                <div class="card">
{#                  <div class="card-header">#}
{#                  </div>#}
                  <!-- /.card-header -->
                  <div class="card-body">
                      <div class="form-group" style="margin-top: 30px; margin-bottom: 30px; margin-left: 0px;">
                          <label class="col-sm-12 control-label"><b style="font-size:20px;text-align: right;">情报命中数据</b></label>
                      </div>
                        <form id="ruleForm" class="form-horizontal col-sm-12" method="get" onsubmit="" style="">
                            {% csrf_token %}
                            <div class="box-body" style="text-align: center">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group row" style="text-align: center; font-size:14px;">
                                            <label class="col-sm-1 col-form-label">组织</label>
                                            <div class="col-sm-3" style="text-align: center">
                                              <input type="text" class="form-control" id="group" name="group" placeholder="请输入组织">
                                            </div>
{#                                            <label class="col-sm-1 col-form-label">技术</label>#}
{#                                            <div class="col-sm-3" style="text-align: center">#}
{#                                              <input type="text" class="form-control" id="techniques" name="techniques" placeholder="请输入技术类型">#}
{#                                            </div>#}
{#                                            <label class="col-sm-1 col-form-label">软件</label>#}
{#                                            <div class="col-sm-3" style="text-align: center">#}
{#                                              <input type="text" class="form-control" id="software" name="software" placeholder="请输入组织或软件类型">#}
{#                                            </div>#}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" id="submit" class="btn btn-primary" style="width: 20%">
                                            <i class="fas fa-search"></i>
                                            <span>查询</span>
                                            <div class="custom-control custom-switch" hidden="hidden">
                                              <input type="checkbox" class="custom-control-input" id="customSwitch1">
                                              <label class="custom-control-label" for="customSwitch1"></label>
                                            </div>
                                        </button>
                                        <button class="btn btn-default" id="reset" data-dismiss="modal" style="margin-left: 30px; width: 20%">
                                            <i class="fas fa-undo"></i>
                                            <span>重置</span>
                                        </button>
{#                                        <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin-left: 30px; width: 20%">#}
{#                                            <i class="fas fa-plus"></i>#}
{#                                            <span>新建</span>#}
{#                                        </button>#}
{#                                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" style="margin-left: 30px; width: 20%">#}
{#                                              批量导入#}
{#                                        </button>#}
                                    </div>
                                </div>
                            </div>
                        </form>
                      <div style="margin: 0px;">
                          <label class="col-sm-12 control-label"><b style="font-size:15px;text-align: right;">导出数据请在下方选择导出选项:</b></label>
                      </div>
                    <table id="example" class="table table-bordered table-striped display">
                        <thead>
                        </thead>
                    </table>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
      </div>
{#        新建弹出#}
        <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                        <div class="box box-primary">
                            <div class="row" style="width:90%; margin:0 auto; margin-top:40px" >
                                <form id="createForm" class="form-horizontal col-sm-12" method="post" onsubmit="">
                                    {% csrf_token %}
                                    <div class="box-body" style="text-align: center">
                                        <div class="form-group row" style="text-align: center">
                                            <label class="col-sm-2 col-form-label">技术ID</label>
                                            <div class="col-sm-10">
                                              <input type="text" class="form-control" name="ID" required="required">
                                            </div>
                                        </div>
                                        <div class="form-group row" style="text-align: center">
                                            <label class="col-sm-2 col-form-label">日志字段</label>
                                            <div class="col-sm-10">
                                              <input type="text" class="form-control" name="ID" required="required">
                                            </div>
                                        </div>
                                        <div class="form-group row" style="text-align: center">
                                            <label class="col-sm-2 col-form-label">字段值</label>
                                            <div class="col-sm-10">
                                              <input type="text" class="form-control" name="ID" required="required">
                                            </div>
                                        </div>
                                    </div>
                                    <!--box body -->

                                    <div class="modal-footer" style="width:100%;">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                        <button class="btn btn-default" data-dismiss="modal">关闭</button>
                                    </div>
                                </form>
                            </div>
                        </div>
{#                    </div>#}
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    {#        导入弹出#}
        <div class="modal fade" id="myModal1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel" style="font-size: 25px">导入数据</h4>

                                <div class="box box-primary">
                                    <div class="row">
                                        <form id="uploadForm" class="form-horizontal" enctype="multipart/form-data" method="post">
                                            {% csrf_token %}
                                            <div class="box-body">
                                                <div class="form-group">
                                                    <label class="col-sm-6 control-label">上传Excel</label>
                                                    <div class="col-sm-10">
                                                        <input type="file" class="form-control" style="height: 48px;" name="excel" id="excel" accept=".xlsx" required />
                                                    </div>
                                                </div>
                                                <br/>
                                                <div class="form-group">
                                                    <label class="col-sm-12 control-label"><b style="font-size:10px;text-align: right;margin: 10px">提示:请选择指定格式的文件！</b></label>
                                                </div>
                                            </div>
                                            <div class="modal-footer" style="width:50%">
                                                <button type="submit" class="btn btn-primary">提交</button>
                                                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                </div>
      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
      </aside>

{% endblock %}

{% block footer_js %}
<!-- jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables  & Plugins -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/static/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/static/plugins/jszip/jszip.min.js"></script>
<script src="/static/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/static/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/static/plugins/jszip/jszip.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/static/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
// 宽度拖拽
<script src="/static/plugins/datatables-colresizable/colResizable-1.6.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>

<!-- AdminLTE App -->
{#<script src="/static/dist/js/adminlte.min.js"></script>#}
<script src="/static/js/jquery.form.js"></script>
<script src="/static/js/bootstrap-growl.js"></script>
<script>
    $('#reservationtime').daterangepicker({
      timePicker: true,
      timePickerIncrement: 30,
      locale: {
        format: 'MM/DD/YYYY hh:mm A'
      }
    })
    //新建
    $("#createForm").ajaxForm({
        type: "post",
        url: "/information/target/data/create/",    //提交到的url
        success: function (data) {
            if (data.success) {
                $.growlService("创建成功", {type: "success"});
                setTimeout(() => {
                  window.location.reload()
                }, 1000);
            } else {
                console.log(data);
                $.growlService(data["error_message"], {type: "danger"});
            }
        }
    });
    //上传文件
    $("#uploadForm").ajaxForm({
        type: "post",
        url: "/information/target/import/data/",    //提交到的url
        success: function (data) {
            //判断文件格式
            try {
                var data1 = JSON.parse(data);
                if (data1['error'] == 'not_xlsx') {
                    alert("请检查文件格式！");
                }
            }
            catch (e) {
                if (data.success) {
                    location.href = "#";
                }
                else {
                    $.growlService("上传文件有误", {type: "danger"})
                }
            }
        }
    });
</script>
//datatables
<script>
    //  点击详情展示的数据
    function format(d) {
        //详情
        var tr_td = ''
        var row =0
        for (i in d) {
            if (row < 30){
                tr_td += '<tr>' +
                '<td>' + i + ':</td>' +
                '<td>' +
                d[i] +
                '</td>' +
                '</tr>'
            }
            row = row + 1
        }
        table_html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + tr_td + '</table>'
        return (
            table_html
        );
    }
    //全部显示、部分显示切换
    var remarkShowLength = 20;//默认现实的字符串长度
    //切换显示备注信息，显示部分或者全部
    function changeShowRemarks(obj){//obj是td
       var content = $(obj).attr("content");
       if(content != null && content != ''){
          if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注，切换到显示部分
             //$(obj).removeAttr('isDetail');//remove也可以
             $(obj).attr('isDetail',false);
             $(obj).html(getPartialRemarksHtml(content));
          }else{//当前显示的是部分备注信息，切换到显示全部
             $(obj).attr('isDetail',true);
             $(obj).html(getTotalRemarksHtml(content));
          }
       }
    }
    //部分备注信息
    function getPartialRemarksHtml(remarks){
          return remarks.substr(0,remarkShowLength) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
    }

    //全部备注信息
    function getTotalRemarksHtml(remarks){
          return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
    }
  $(document).ready(function () {
    var table = $("#example").DataTable({
        "searching": false,//搜索框
        "responsive": true,
        "lengthChange": false,
        "ordering": false,
        "autoWidth": true,
        "dom": 'Bfrtip',
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"], // 导出的数据格式
        "pageLength": 15,//每页显示数据
        "bProcessing": true, //显示数据加载中\
        "createdRow": function( row, data, dataIndex ) {
           if(data.hit_techniques.length > remarkShowLength){//只有超长，才有td点击事件
              $(row).children('td').eq(2).attr('ondblclick','javascript:changeShowRemarks(this);');
           }
           if(data.group_techniques.length > remarkShowLength){//只有超长，才有td点击事件
              $(row).children('td').eq(3).attr('ondblclick','javascript:changeShowRemarks(this);');
           }
           if(data.software.length > remarkShowLength){//只有超长，才有td点击事件
              $(row).children('td').eq(4).attr('ondblclick','javascript:changeShowRemarks(this);');
           }
           $(row).children('td').eq(2).attr('content',data.hit_techniques.split(',').join("<br>"));
           $(row).children('td').eq(3).attr('content',data.group_techniques.split(',').join("<br>"));
           $(row).children('td').eq(4).attr('content',data.software.split(',').join("<br>"));
         },
        {#ajax: '/information/target/data/',#}
        "sAjaxSource": '/information/target/data/',
        serverSide: true, //开启服务端模式
        "fnServerData": function(sSource, aoData, fnCallback){
            // 点击过搜索后每次datatables数据变动都会读取过滤参数
            var customSwitch1 = document.getElementById("customSwitch1").checked
            if (customSwitch1){
                var group = document.getElementById("group").value
                {#var techniques = document.getElementById("techniques").value#}
                {#var software = document.getElementById("software").value#}
                var search = {}
                if (group){
                    search['group'] = group
                }
                {#if (techniques){#}
                {#    search['techniques'] = techniques#}
                {# }#}
                {#if (software){#}
                {#    search['software'] = software#}
                {# }#}
                aoData.push({'name': 'search', 'state': customSwitch1, 'value': search})
            }
            $.ajax( {
                'type' : 'get',
                "url": sSource,
                "dataType": "json",
                "data": { "aodata" : JSON.stringify(aoData) },
                "success": function(resp) {
                    fnCallback(resp);
                }
            });
         },
        columns: [
            { data: 'group',title:'组织',
                "defaultContent": ""
            },
            { data: 'hit_percentage',title:'技术命中占比',
                "defaultContent": ""
            },
            { data: 'hit_techniques',title:'已命中技术',
                "defaultContent": "",
                "render": function (data, type, full, meta) {
                    if (full.hit_techniques.length > remarkShowLength) {
                     return getPartialRemarksHtml(full.hit_techniques.split(',').join("<br>"));//显示部分信息
                    } else {
                        return full.hit_techniques.split(',').join("<br>");//显示原始全部信息
                        }
                    }
            },
            { data: 'group_techniques',title:'组织下所有技术',
                "defaultContent": "",
                "render": function (data, type, full, meta) {
                    if (full.group_techniques.length > remarkShowLength) {
                     return getPartialRemarksHtml(full.group_techniques.split(',').join("<br>"));//显示部分信息
                    } else {
                        return full.group_techniques.split(',').join("<br>");//显示原始全部信息
                        }
                    }
            },
            { data: 'software',title:'组织下所有软件',
                "defaultContent": "",
                "render": function (data, type, full, meta) {
                    if (full.software.length > remarkShowLength) {
                     return getPartialRemarksHtml(full.software.split(',').join("<br>"));//显示部分信息
                    } else {
                        return full.software.split(',').join("<br>");//显示原始全部信息
                        }
                    }
            },
            {#{ title:'查看',#}
            {#    "className": 'dt-control',#}
            {#    "orderable": false,#}
            {#    "data": null,#}
            {#    "defaultContent": '<a class="btn btn-info btn-sm" href="#"> <i class="fas"> </i>查看 </a>',#}
            {# },#}
        ],
    }).on('init.dt', function (){
        // 宽度拖拽
        $('table').colResizable();
      });
    // 查看详情
    $('#example tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });
    //查找
    $("#submit").on('click', function () {
        document.all.customSwitch1.checked=true
        table.ajax.reload();
     });
    //重置按钮
    $("#reset").on('click', function () {
        document.getElementById("group").value='';
        {#document.getElementById("techniques").value='';#}
        {#document.getElementById("software").value='';#}
    });

    //防止重载
    $("#ruleForm").ajaxForm({

      });
  });
</script>
{% endblock %}
